<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学期教材列表</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/element-ui/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-card>
        <div slot="header">
            <span>学期教材列表</span>
        </div>
        <el-form :inline="true" style="margin-bottom: 20px;">
            <el-form-item label="专业">
                <el-input v-model="major" readonly></el-input>
            </el-form-item>
            <el-form-item label="学期">
                <el-select v-model="term" placeholder="请选择学期" @change="loadBooks">
                    <el-option label="2024春季" value="2024春季"></el-option>
                    <el-option label="2024秋季" value="2024秋季"></el-option>
                    <el-option label="2025春季" value="2025春季"></el-option>
                    <el-option label="2025秋季" value="2025秋季"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-table :data="books" style="width: 100%">
            <el-table-column prop="isbn" label="ISBN"></el-table-column>
            <el-table-column prop="bookName" label="教材名称"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="publisher" label="出版社"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
        </el-table>
    </el-card>
</div>
<script th:inline="javascript">
    window.currentUser = /*[[${user} == null ? '{}' : ${user}]]*/ {};
</script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                major: '[[${major}]]',
                term: '[[${term}]]',
                books: []
            }
        },
        mounted() {
            if (this.term && this.major) {
                this.loadBooks();
            }
        },
        methods: {
            loadBooks() {
                if (!this.term || !this.major) return;
                axios.get('/termbook/api/byTermMajor', { params: { term: this.term, major: this.major } })
                    .then(res => {
                        this.books = res.data;
                    });
            }
        }
    });
</script>
</body>
</html> 